<template>
  <el-dialog
    title="修改信息"
    :visible="isopen"
    :append-to-body="true"
    @close="close"
    width="580px"
    @opened="openDialog"
  >
    <el-form :model="form">
      <el-form-item label="类别" :label-width="formLabelWidth">
        <el-select v-model="form.category" placeholder="请选择活动区域">
          <el-option
            v-for="item in categoryOptions.item"
            :key="item.id"
            :label="item.category_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="概况" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.content" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="danger" @click="submit" :loading="submit_button_loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { watch, reactive, ref } from "@vue/composition-api";
import { EditInfo } from "@/api/news";
export default {
  props: {
    isopen: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      default: () => []
    },
    editData: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { root, emit }) {
    const form = reactive({
      category: "",
      title: "",
      content: ""
    });
    const categoryOptions = reactive({
      item: [],
      editData: []
    });
    const formLabelWidth = ref("70px");
    const submit_button_loading = ref(false);
    // methods
    // 对父组件传递的分类数据进行接收
    const openDialog = () => {
      categoryOptions.item = props.category;
      categoryOptions.editData = props.editData;

      form.category = categoryOptions.editData.categoryId
      form.title = categoryOptions.editData.title;
      form.content = categoryOptions.editData.content;
    };
    // 模态框关闭方法，触发后修改父组件isopen属性为false
    const close = () => {
      emit("update:isopen", false);
      //   this.$emit("close");
    };
    // 添加信息方法 调用添加接口
    const submit = () => {
      if (!form.category) {
        root.$message.error("请选择分类");
        return false;
      }
      if (!form.title) {
        root.$message.error("请输入标题");
        return false;
      }
      if (!form.content) {
        root.$message.error("请输入内容");
        return false;
      }
      let requestData = {
        id:categoryOptions.editData.id,
        categoryId: form.category,
        title: form.title,
        content: form.content
      };
      console.log(requestData);
      submit_button_loading.value = true;
      EditInfo(requestData)
        .then(response => {
          submit_button_loading.value = false;
          categoryOptions.editData = []
          console.log(categoryOptions.editData);
          emit('foremit',{})
          close();
        })
        .catch(error => {});
    };
    return {
      form,
      formLabelWidth,
      close,
      openDialog,
      categoryOptions,
      submit,
      submit_button_loading
    };
  }
};
</script>

<style>
</style>